@import "../../variable.less";
.@{prefix} {
  &-common-phrase {
    display: inline-flex;
    &-btn {
      display: inline-flex !important;
      align-items: center;
      &[disabled] {
        .@{prefix}-common-phrase-plus-icon {
          color: var(--disabled-color);
        }
      }
    }
    &-popup {
      width: 100%;
      height: 100%;
      display: flex;
      flex-flow: column;
      &-title {
        margin-bottom: 10px;
        .@{prefix}-common-phrase-plus-icon {
          line-height: 1;
          margin-right: 4px;
          color: #fff;
        }
      }
    }
    &-content {
      flex: 1;
      overflow: auto;
      &-item {
        font-size: 14px;
        border-bottom: 1px solid var(--border-color);
        padding: 10px;
        border-radius: var(--border-radius-base);
        display: flex;
        color: #000;
        &:hover {
          cursor: pointer;
          background-color: #007aff;
          color: #fff;
        }
      }
    }
    &-text {
      flex: 1;
      word-break: break-all;
    }
    &-setting-popup {
      width: 100%;
      height: 100%;
      display: flex;
      flex-flow: column;
      &-title {
        margin-bottom: 10px;
        .me-common-phrase-plus-icon {
          line-height: 1;
          margin-right: 4px;
          color: #fff;
        }
      }
      &-content {
        flex: 1;
        overflow: auto;
      }
      &-item {
        font-size: 14px;
        border-bottom: 1px solid var(--border-color);
        padding: 10px;
        border-radius: 4px;
        display: flex;
        color: #000;
        &.edit {
          align-items: center;
          .me-common-phrase-setting-popup-edit-icon {
            top: 0;
          }
          .me-common-phrase-setting-popup-delete-icon {
            top: 0;
          }
        }
      }
      &-text {
        flex: 1;
        margin-right: 10px !important;
        word-break: break-all;
      }
      &-edit-icon {
        font-size: 14px;
        width: 16px;
        height: 16px;
        position: relative;
        top: 2px;
        margin-right: 10px;
        &:hover {
          opacity: 0.8;
        };
        color: #007aff;
      }
      &-delete-icon {
        font-size: 14px;
        width: 16px;
        height: 16px;
        position: relative;
        top: 2px;
        &:hover {
          opacity: 0.8;
        };
        color: #f00;
      }
      &-bottom {
        display: flex;
        justify-content: center;
        margin-top: 16px;
        &-btn {
          margin-right: 16px;
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}